<script setup lang="ts">
const data = [
    { id: '1', imgSrc: './assets/avatar1.png', title: '华东地区物资采购', subTitle: '关于华东地物资采购订购的一些说明描述' },
    { id: '2', imgSrc: './assets/avatar2.png', title: '集团本部食材采购部', subTitle: '关于集团本部食材采购部的一些说明描述' },
    { id: '3', imgSrc: './assets/avatar3.png', title: '集团运输服务票据', subTitle: '关于集团运输服务票据的一些说明描述' },
    { id: '4', imgSrc: './assets/avatar4.png', title: '华东地区物资采购', subTitle: '关于华东地区物资采购订购的一些说明描述' },
    { id: '5', imgSrc: './assets/avatar5.png', title: '集团本部食材采购部', subTitle: '关于集团本部食材采购部的一些说明描述' },
    { id: '6', imgSrc: './assets/avatar6.png', title: '集团运输服务票据', subTitle: '关于集团运输服务票据的一些说明描述' },
    { id: '7', imgSrc: './assets/avatar7.png', title: '集团运输服务票据', subTitle: '关于集团运输服务票据的一些说明描述' },
    { id: '8', imgSrc: './assets/avatar8.png', title: '华东地区物资采购', subTitle: '关于华东地区物资采购订购的一些说明描述' },
    { id: '9', imgSrc: './assets/avatar9.png', title: '集团本部食材采购部', subTitle: '关于集团本部食材采购部的一些说明描述' },
    { id: '10', imgSrc: './assets/avatar10.png', title: '集团运输服务票据', subTitle: '关于集团运输服务票据的一些说明描述' }
];
</script>
<template>
    <div style="background-color: white">
        <f-list-view :data="data" :card-view="true" style="width: 680px">
            <template #content="listItemProps">
                <div class="f-template-card-row d-flex">
                    <div class="item-action-primary">
                        <img :src="listItemProps.item.imgSrc" class="ap-img" />
                    </div>
                    <div class="listview-item-content d-flex k-align-items-center">
                        <div class="listview-item-main k-flex">
                            <h4 class="listview-item-title">{{ listItemProps.item.title }}</h4>
                            <h5 class="listview-item-subtitle">{{ listItemProps.item.subTitle }}</h5>
                        </div>
                    </div>
                </div>
            </template>
        </f-list-view>
    </div>
</template>
